<template>
  <div :class="className" :style="{height:height,width:width}" />
</template>

<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import { debounce } from '@/utils'

export default {
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '300px'
    },
    chartData: {
      type: Array,
      required: false,
    }
  },
  watch:{
    chartData: {
      deep: true,
      handler(val) {
        this.initChart(val)
      }
    }
  },
  data() {
    return {
      arrName:[],
      arrValue: [],
      optionData: [],
      objData : [],
      chart: null
    }
  },
  mounted() {
    this.initChart(this.chartData)
    this.__resizeHandler = debounce(() => {
      if (this.chart) {
        this.chart.resize()
      }
    }, 100)
    window.addEventListener('resize', this.__resizeHandler)
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    window.removeEventListener('resize', this.__resizeHandler)
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    getArrayValue(array, key) {
      var key = key || 'value';
      var res = [];
      if (array) {
        array.forEach(function (t) {
          res.push(t[key]);
        });
      }
      return res;
    },
    array2obj(array, key) {
      var resObj = {};
      for (var i = 0; i < array.length; i++) {
        resObj[array[i][key]] = array[i];
      }
      return resObj;
    },
    getData(data) {
      var res = {
        series: [],
        yAxis: [],
      };
      for (let i = 0; i < data.length; i++) {
        var n = 90 / data.length
        res.series.push({
          name: '工单进度',
          type: 'pie',
          clockWise: false, //顺时加载
          hoverAnimation: false, //鼠标移入变大
          radius: [85 - i * n + '%', 70 - i * n + '%'],
          center: ['50%', '50%'],
          label: {
            show: false,
          },
          itemStyle: {
            label: {
              show: false,
            },
            labelLine: {
              show: false,
            },
            borderWidth: 5,
          },
          data: [
            {
              value: (data[i].value * 1.5 ) ,
              name: data[i].name ,
            },
            {
              value: 200 - (data[i].value * 1.5),
              name: '',
              itemStyle: {
                color: 'rgba(0,0,0,0)',
                borderWidth: 0,
              },
              tooltip: {
                show: false,
              },
              hoverAnimation: false,
            },
          ],
        });
        res.series.push({
          name: '',
          type: 'pie',
          silent: true,
          z: 1,
          clockWise: false, //顺时加载
          hoverAnimation: false, //鼠标移入变大
          radius: [85 - i * n + '%', 70 - i * n + '%'],
          center: ['50%', '50%'],
          label: {
            show: false,
          },
          itemStyle: {
            label: {
              show: false,
            },
            labelLine: {
              show: false,
            },
            borderWidth: 5,
          },
          data: [
            {
              value: 150,
              itemStyle: {
                color: '#E3F0FF',
                borderWidth: 0,
              },
              tooltip: {
                show: false,
              },
              hoverAnimation: false,
            },
            {
              value: 50,
              name: '',
              itemStyle: {
                color: 'rgba(0,0,0,0)',
                borderWidth: 0,
              },
              tooltip: {
                show: false,
              },
              hoverAnimation: false,
            },
          ],
        });
        res.yAxis.push(((data[i].value / 100) * 100).toFixed(2) + '%');
      }
      return res;
    },
    initChart(data) {
      this.chart = echarts.init(this.$el, 'macarons')
      this.getData(data);
      this.arrName = this.getArrayValue(data,'name')
      this.arrValue = this.getArrayValue(data, 'value')
      this.optionData = this.getData(data)
      this.objData = this.array2obj(data, 'name')
      this.chart.setOption({
        backgroundColor: '#fff',
        legend: {
          show: true,
          top: '20%',
          left: '66%',
          data: this.arrName,
          itemWidth: 20,
          itemHeight: 10,
          width: 50,
          padding: [0, 10],
          itemGap: 40 / data.length,
          /*formatter: function (name) {

            return '{title|' + name + '}\n{value|' + this.objData[name].value + '%}';
          },*/
          textStyle: {
            rich: {
              title: {
                fontSize: 12,
                lineHeight: 16,
                color: 'rgba(0,0,0,.45)',
              },
              value: {
                fontSize: 14,
                lineHeight: 18,
                color: 'rgba(0,0,0,.85)',
              },
            },
          },
        },
        tooltip: {
          show: true,
          trigger: 'item',
          formatter: '{a}<br>{b}:({c}%)',
        },
        grid: {
          top: '5%',
          bottom: '52%',
          left: '50%',
          containLabel: false,
        },
        yAxis: [
          {
            type: 'category',
            inverse: true,
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              interval: 0,
              inside: true,
              textStyle: {
                color: '#000',
                fontSize: 10,
              },
              show: true,
            },
            data: this.optionData.yAxis,
          },
        ],
        xAxis: [
          {
            show: false,
          },
        ],
        color: [ '#5ab1ef', '#2ec7c9', '#ffb980', '#b6a2de'],
        series: this.optionData.series,
      })
    }
  }
}
</script>
